<template>
	<view class="container">
		<view class="store-room-top">
			<view class="search-view">
				<image class="search-view-icon" src="../../../static/images/search@3x.png"></image>
				<input
					maxlength="10"
					class="search-view-input"
					placeholder="请输入门店名称"
					placeholder-class="input-placeholder"
					@confirm="searchRoomTypeList"
					v-model="query_filter.StoreName"
				/>
			</view>
			<view class="search-view-btn-container"><view class="text" @click="searchRoomTypeList">搜索</view></view>
		</view>
		<view class="room-container" v-if="roomList.length > 0">
			<view v-for="(item, index) in roomList" :key="index" class="room-item" @click="clickItem(item.storeId,item.storeAlias)">
				<view class="item-container">
					<view class="item-container-image" style="flex-shrink: 0;">
						<view v-if="item.img" :style="{ backgroundImage: 'url( ' + item.img + ' )' }" class="store-image"></view>
						<image v-else src="../../../static/images/guest-room-default-icon.png"></image>
					</view>
					<view class="item-right">
						<view class="store-name">{{ item.name }}</view>
						<view class="store-distance elone"><span :class="index>0?'store-tag':'store-tag1'" v-for="(one,index) in item.types">{{one}}</span></view>
						<view class="store-price">
							<text>{{ item.price | formatMoneyRmbUnit }}</text>
							<view class="yuyue-btn">查看房间</view>
						</view>
						<view>
							<!-- <view class="store-distance">距您直线{{ item.distance }}米</view> -->
							<view class="store-address">{{ item.sortAddress }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="no-room-container" v-else>
			<view class="no-room-container-text">
				<view v-if="loadingStatus"></view>
				<view v-else>抱歉！没有找到符合条件的客房</view>
			</view>
		</view>
	</view>
</template>

<script>
import { searchGuestRoomTypeList } from '@/constant/xyGuestRoom.js';
import { getCurrentLocation, subStringLength } from '@/config/utils.js';
import { isLogin, toLogin, errorToShow, showShareMenu } from '@/config/common.js';
export default {
	data() {
		return {
			roomList: [],
			loadingStatus: true,
			query_filter: {
				Latitude: '',
				Longitude: '',
				StoreName: ''
			}
		};
	},
	onShow() {
		// this.getCurrentLocation();
		showShareMenu();
		this.searchRoomTypeList();
	},
	onPullDownRefresh() {
		this.searchRoomTypeList();
	},
	methods: {
		getCurrentLocation() {
			if (!isLogin()) {
				errorToShow('请先登录!', toLogin());
				return;
			}
			
			getCurrentLocation()
				.then(res => {
					
					console.log(res,'res')
					this.query_filter.Latitude = res.latitude;
					this.query_filter.Longitude = res.longitude;
					this.searchRoomTypeList();
				})
				.catch(err => {
					this.searchRoomTypeList();
				});
		},
		async searchRoomTypeList() {
			let params={
				latitude:this.query_filter.Latitude,
				longitude:this.query_filter.Longitude
			}
			let res = await searchGuestRoomTypeList(params);
			this.loadingStatus = false;
			uni.stopPullDownRefresh();
			// res.forEach(item => {
			// 	item.sortName = subStringLength(item.name, 24);
			// 	item.sortAddress = subStringLength(item.addr, 30);
			// });
			this.roomList = res.data;
		},
		clickItem(storeId,storeAlias) {
			uni.navigateTo({
				url: '/packagePages/room/xyRoomDetail/index?storeId=' + storeId+'&storeAlias='+storeAlias
			});
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	background-color: $main-page-color;
	overflow-y: auto;
	padding: 10rpx 12rpx 0rpx 12rpx;
	overflow-x: hidden;
	height: 100vh;
	.room-container {
		display: flex;
		flex-direction: column;
		padding: 10rpx;
	}

	.room-item {
		width: 100%;
		background-color: #fff;
		margin-bottom: 20rpx;
		border-radius: 12rpx;

		.item-container {
			height: 280rpx;
			padding-left: 20rpx;
			display: flex;
			align-items: center;

			&-image {
				width: 180rpx;
				height: 240rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 12rpx;
				}
			}
		}

		.item-right {
			width: calc(100% - 220rpx);
			margin-left: 20rpx;
			padding-right: 30rpx;
			height: 240rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			color: $main-text-color-gray-33;

			.store-name {
				font-size: $main-text-size-30;
				font-weight: bold;
			}

			.store-price {
				font-size: $main-text-size-40;
				color: $main-text-color-main-orange;
				display: flex;
				justify-content: space-between;

				.yuyue-btn {
					font-size: $main-text-size-28;
					padding: 8rpx 14rpx;
					text-align: center;
					color: #f7772a;
					border: 2rpx solid #f7772a;
					border-radius: 6rpx;
				}
			}

			.store-distance {
				font-size: $main-text-size-26;
				color: $main-text-color-gray-black;
				margin-bottom: 6rpx;
			}

			.store-address {
				font-size: $main-text-size-26;
				color: $main-text-color-gray-black;
			}
		}
	}
}

.store-image {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border-radius: 12rpx;
}

.no-room-container {
	height: 66vh;
	padding-top: 30vh;

	&-text {
		color: #8d8d8d;
		text-align: center;
	}
}

.store-room-top {
	padding: 10rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.search-view-btn-container {
		width: 70rpx;
		margin-left: 20rpx;
		font-size: $main-text-size-30;
		color: $main-text-color-gray-33;
	}
	.search-view {
		display: flex;
		align-items: center;
		background-color: #fff;
		height: 60rpx;
		border-radius: 30rpx;
		width: 100%;
		.input-placeholder {
			font-size: $main-text-size-28;
			color: $main-text-color-grey;
		}

		&-icon {
			width: 30rpx;
			height: 30rpx;
			margin-left: 30rpx;
			margin-right: 20rpx;
		}
		&-input {
			font-size: $main-text-size-28;
			color: $main-text-color-gray-33;
			width: 80%;
		}
	}
}
.store-tag1{
	padding:0 10rpx;
}
.store-tag{
	padding:0 10rpx;
	position: relative;

	&::before{
		content: '';
		position: absolute;
		top:8rpx;
		left: -5rpx;
		width: 1;
		height: 26rpx;
		border-right:1px solid #999;
	}
}
</style>
